<template>
  <div>
    <bread-crumb :breadInfoList="breadInfoList"></bread-crumb>
    <common-card>
      <div class="container" slot="card-info">
        <el-form :model="form" ref="form">
          <el-form-item
            prop="title"
            label="视频标题："
            label-width="100px"
            :rules="[{required:true,message:'标题不能为空',trigger:'blur'}]"
          >
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            prop="imglist"
            label="封面："
            label-width="100px"
            :rules="[{required:true,message:'请上传封面',trigger:'change'}]"
          >
            <common-upload
              @fileListChange="imglistChange($event,val)"
              ref="myUpload"
              :filelist="myImg"
              fileType="image"
              listType='picture-card'
            ></common-upload>
          </el-form-item>
          <el-form-item
            prop="videolist"
            label="上传视频："
            label-width="100px"
            :rules="[{required:true,message:'请上传视频',trigger:'change'}]"
          >
            <common-upload
              @fileListChange="videolistChange($event,val)"
              ref="upVideo"
              :filelist="myVideo"
              fileType="video"
              drag
            ></common-upload>
          </el-form-item>
          <el-form-item size="large" style="margin-top:20px;margin-left:100px">
            <el-button type="primary" @click="onOk('form')" :loading="isLoading" size="small">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </common-card>
  </div>
</template>
<script>
import commonCard from "@/components/commonCard";
import breadCrumb from "@/components/commonBreadCrumb";
import commonUpload from "@/components/commonUpLoad";
import Video from "@/api/video";
import Common from "@/api/common";
import apiConfig from "@/utils/apiConfig";
import { isEmpty } from "@/utils/func";
const { api } = apiConfig;
export default {
  data() {
    return {
      id: "",
      breadInfoList: [],
      isLoading: false,
      form: {
        desc: "",
        content: "",
        title: "",
        imglist: [],
        videolist:[],
      },
      //修改页面初始化上传文件的内容
       myVideo:[],
       myImg:[]
    };
  },
  created() {
    this.breadInfoList =
      this.$route.params && this.$route.params.id
        ? ["视频资源管理", "修改视频"]
        : ["视频资源管理", "添加视频"];
  },
  async mounted() {
    let params = this.$route.params;
    if (params && params.id) {
      this.id = params.id;
      let result = await Video.getVideoInfo(params.id);
      let data = result.content;
      for (let key in this.form) {
        this.form[key] = data[key];
      }
      this.myVideo=this.form['videolist']
      this.myImg=this.form['imglist']
    }
  },
  methods: {
    async onOk(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) {
          return false;
        } else {
          //按钮开始出现loading
          this.isLoading = true;
          let data = !this.id
            ? await Video.addVideo(this.form)
            : await Video.updateVideo(this.id, this.form);
          if (data.success) {
            this.isLoading = false;
            console.log(this.form["imglist"]);

            this.$message({
              message: "保存视频成功!",
              type: "success"
            });
            this.$router.push({ path: "/video/grid", query: {} });
          } else {
            this.$message.error("保存视频失败!");
          }
        }
      });
    },
    imglistChange(val) {
      this.form["imglist"] = val;
    },
    videolistChange(val){
        this.form["videolist"] = val;
    }
  },
  components: {
    commonCard,
    breadCrumb,
    commonUpload
  }
};
</script>
<style lang='scss' scoped>
.container {
  height: 90%;
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
</style>